.Popover {
    perspective: 80rem;
    perspective-origin: top;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: row;

    h5 {
        margin: 0.25rem 0.5rem;
    }

    p:last-child {
        margin-bottom: 0;
    }

    &[data-floating-placement^='top'] {
        perspective-origin: bottom;
    }

    &.Popover--top-centered {
        top: 1rem;
        left: 50%;
        transform: translate(-50%);
    }
}

.Popover__box {
    position: relative; // For arrow
    flex-grow: 1;
    max-width: 100%;
    overflow: hidden;
    background: var(--bg-light);
    border: 1px solid var(--secondary-3000-button-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-elevation-3000);
    opacity: 0;
    transition: opacity 50ms ease, transform 50ms ease;
    transform-origin: top;

    // We set the offset below instead of using floating-ui's offset(), because we need there to be no gap between
    // the reference and the floating element. This makes hover-based popovers possible

    .Popover[data-placement^='bottom'] & {
        margin-top: 0.25rem;
        transform: rotateX(-6deg);
        transform-origin: top;
    }

    .Popover[data-placement^='bottom'].Popover--with-arrow & {
        margin-top: 0.5rem;
    }

    .Popover[data-placement^='top'] & {
        margin-bottom: 0.25rem;
        transform: rotateX(6deg);
        transform-origin: bottom;
    }

    .Popover[data-placement^='top'].Popover--with-arrow & {
        margin-bottom: 0.5rem;
    }

    .Popover[data-placement^='left'] & {
        margin-right: 0.25rem;
        transform: rotateY(-6deg);
        transform-origin: right;
    }

    .Popover[data-placement^='left'].Popover--with-arrow & {
        margin-right: 0.5rem;
    }

    .Popover[data-placement^='right'] & {
        margin-left: 0.25rem;
        transform: rotateY(6deg);
        transform-origin: left;
    }

    .Popover[data-placement^='right'].Popover--with-arrow & {
        margin-left: 0.5rem;
    }

    .Popover.Popover--enter-active &,
    .Popover.Popover--enter-done & {
        opacity: 1;
        transform: none;
    }

    .Popover--max-content-width & {
        width: max-content;
    }
}

.Popover__arrow {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bg-light);
    transform: rotate(45deg);

    [data-placement^='bottom'] & {
        top: -0.3125rem;
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border);
    }

    [data-placement^='top'] & {
        bottom: -0.3125rem;
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
    }

    [data-placement^='left'] & {
        right: -0.3125rem;
        border-top: 1px solid var(--border);
        border-right: 1px solid var(--border);
    }

    [data-placement^='right'] & {
        left: -0.3125rem;
        border-bottom: 1px solid var(--border);
        border-left: 1px solid var(--border);
    }
}

.Popover__content {
    max-height: 100%;
    border-radius: calc(var(--radius) - 1px);
}

.Popover--padded .Popover__content > .ScrollableShadows__inner {
    padding: 0.25rem;
}
